{% extends "base.html" %}
{% block content %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/Homepage.css' %}" />

<div class="banner">
    <div class="Card">
    <div class="mt-4 card-deck">
        <div class="card text-white bg-dark mb-2" style="max-width: 18rem; width:300px; height:180px; float:left;">
          <div class="card-header">设备总数</div>
          <div class="card-body">
            <h5 class="card-title">{{All_devices}}</h5>
            <p class="card-text"></p>
          </div>
        </div>

        <div class="card text-white bg-danger mb-3" style="max-width: 18rem; width:300px; height:180px; float:left; margin-left:11%">
          <div class="card-header">华为</div>
          <div class="card-body">
            <h5 class="card-title">{{Huawei_num}}</h5>
            <p class="card-text"></p>
          </div>
        </div>

        <div class="card text-white bg-primary mb-3" style="max-width: 18rem; width:300px; height:180px; margin-left:75%">
          <div class="card-header">思科</div>
          <div class="card-body">
            <h5 class="card-title">{{Cisco_num}}</h5>
            <p class="card-text"></p>
          </div>
        </div>
    </div>
    </div>

    <div class="log">
    <h3 class="mt-5">&nbsp&nbsp&nbsp最近10个日志</h3>
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>目标设备IP</th>
                <th>操作</th>
                <th>状态</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            {% for log in last_10_event %}
            <tr>
                <td>{{ log.id }}</td>
                <td class="table-success" style="background-color: rgba(0,0,0,0) !important;">{{log.target}}</td>
                <td class="table-warning" style="background-color: rgba(0,0,0,0) !important;">{{log.action}}</td>
                <td class="table-danger" style="background-color: rgba(0,0,0,0) !important;">{{log.status}}</td>
                <td class="table-info" style="background-color: rgba(0,0,0,0) !important;">{{log.time}}</td>
            </tr>
            {% endfor %}

        </tbody>
    </table>
    </div>
    <br><br><br>
</div>
<script type="text/javascript">
document.body.innerHTML = document.body.innerHTML.replace(/Error/ig,"<span style='color: red;'>$&</span>");
</script>
{% endblock %}